
<template>
  <div class="com-drawer">
    <el-drawer
      :with-header="title?true:false"
      :title="title"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :show-close="false"
      :modal-append-to-body="false"
      :size="size"
    >
      <component :is="component" :componentdata="componentdata" />
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'DrawerDialog',
  data() {
    return {
      drawer: false,
      title: '',
      direction: 'rtl',
      component: null,
      componentdata: null,
      size: '380px'
    }
  },
  watch: {
    drawer(v) {
      if (!v) {
        this.title = ''
        this.direction = 'rtl'
        this.component = ''
        this.componentdata = null
        this.success = null
        this.size = '380px'
      }
    }
  },
  mounted() {
    this.$bus.on('drawerDialog', data => {
      if (!data.component) {
        this.$message({
          message: '找不到对应组件内容',
          type: 'error'
        })
        return
      }
      this.component = data.component
      data.title && (this.title = data.title)
      data.size && (this.size = data.size)
      data.direction && (this.direction = data.direction)
      data.componentdata && (this.componentdata = data.componentdata)
      typeof data.success === 'function' && (this.success = data.success)
      this.drawer = true
    })
  },
  destroyed: function() {
    this.$bus.off('drawerDialog')
  },
  methods: {
    handleClose(done) {
      typeof this.success === 'function' ? this.success(done) : done()
    }
  }
}
</script>
